<template>
  <div class="filter-tabs-container">
    <span class="title" v-if="title">{{ title }}：</span>
    <div class="list">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="changeTab(item, index)"
        :style="[currentIndex === index ? active : '']"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'filter-tabs',
  props: {
    title: {
      type: String,
      required: false,
      default: '',
    },
    list: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {
      currentIndex: 0,
    }
  },
  methods: {
    // 改变tab回调
    changeTab(item, index) {
      this.currentIndex = index
      // 外部传入一个函数，可以接受到点击的tab
      this.$emit('changeTab', item)
    },
  },
  computed: {
    active() {
      return { 'background-color': this.theme.color, color: '#fff' }
    },
  },
}
</script>

<style lang="scss" scoped>
.filter-tabs-container {
  height: 28px;
  display: inline-block;
  line-height: 28px;
  .title {
    float: left;
    font-weight: 600;
    height: 100%;
    margin-right: 8px;
    font-size: 14px;
  }
  .list {
    float: right;
    height: 100%;
    border-radius: 5px;
    .item {
      display: inline-block;
      height: 100%;
      padding: 0 15px;
      border: 1px solid #ddd;
      border-left: none;
      color: #333;
      font-size: 14px;
      cursor: pointer;
      &:last-child {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-right: 1px solid #ddd;
      }
      &:first-child {
        border-left: 1px solid #ddd;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }
    }
  }
}
</style>
